import { defineComponent, ref } from 'vue';
import { NButton } from 'naive-ui';
import modeler from '@/store/modules/modeler';
import { useI18n } from '@/hooks/useI18n';
import processProperties from '@/components/setting/processProperties.vue';
import { useModal } from '@/hooks/useModal/useModal';
import {saveProcessProperties} from '@/api/deployment/index';
import {processInfo} from '@/store/modules/processInfo';

const Imports = defineComponent({
  name: 'Property',
  components:{
    processProperties
  },
  setup() {
    const { t } = useI18n();
    const modelerStore = modeler();
    const importRef = ref<HTMLInputElement | null>(null);
    const [ModalRender, modalRef] = useModal();
    const editFormRef = ref<any>(null);
    const proce=processInfo();

    const openImportWindow = () => {
      ModalRender.show({
      title: '流程属性设置',
      width: '50%',
      // 是否显示右上角确定取消
      defaultExtra: true,
      destroyOnClose: true,
      content: () => {
        return <processProperties ref={editFormRef} style="height:40vh;width:100%;overflow: auto;"></processProperties>;
      },
      // 确定方法执行
      onOk: async () => {
        const refData = await editFormRef.value?.handleSubmit();
        if(refData.flowSort==undefined)
          refData.flowSort='';
        proce.setStateData("key",refData.procKey);
        proce.setStateData("sortId",refData.flowSort);
        proce.setStateData("titleModel",refData.titleModel);
        proce.setStateData("name",refData.name);
        const res=await saveProcessProperties(proce.procInfo);
      },
    });
    };

    return () => (
      <span>
        <NButton type="info" secondary onClick={openImportWindow}>
          {'流程属性'}
        </NButton>
      </span>
    );
  },
});

export default Imports;
